<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Kylin AIOps</title>



  <meta name="msapplication-TileColor" content="#00a300">

  <meta name="theme-color" content="#ffffff">
  <meta name="keywords" content="hello Kylin">
  <link rel="canonical" href="https://kylin-aiops.example.com/" />
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "Kylin AIOps",
    "url": "https://kylin-aiops.example.com/",
    "description": "Kylin AIOps "}
  </script>
  <meta name="description"
    content="Kylin AIOps " />
  <meta property="og:title" content="Kylin AIOps ">
  <meta property="og:type" content="website" />
  <meta property="og:image" content="https://kylin-aiops.example.com/banner.png">
  <meta property="og:url" content="https://kylin-aiops.example.com">
  <meta name="twitter:card" content="Kylin AIOps">
  <meta property="og:description" content="Kylin AIOps">
  <meta property="og:site_name" content="Kylin AIOps">
  <meta name="twitter:image:alt" content="Kylin AIOps">

  <style>
    .preloader {
      display: flex;
      height: 100vh;
      align-items: center;
      justify-content: center;
      line-height: 1.8em;
      flex-direction: column;
    }


    .preloader h1 {
      margin-top: 1rem;
      font-weight: bold;
      font-size: 1.44rem;
    }

    .loader {
      animation: rotate 1s infinite;
      height: 50px;
      width: 50px;
    }

    .loader:before,
    .loader:after {
      border-radius: 50%;
      content: '';
      display: block;
      height: 20px;
      width: 20px;
    }

    .loader:before {
      animation: ball1 1s infinite;
      background-color: #0000FF; /* 蓝色 */
      box-shadow: 30px 0 0 #0000FF; /* 蓝色 */
      margin-bottom: 10px;
    }

    .loader:after {
      animation: ball2 1s infinite;
      background-color: #0000FF; /* 蓝色 */
      box-shadow: 30px 0 0 #0000FF; /* 蓝色 */
    }

    @keyframes rotate {
      0% {
        -webkit-transform: rotate(0deg) scale(0.8);
        -moz-transform: rotate(0deg) scale(0.8);
      }

      50% {
        -webkit-transform: rotate(360deg) scale(1.2);
        -moz-transform: rotate(360deg) scale(1.2);
      }

      100% {
        -webkit-transform: rotate(720deg) scale(0.8);
        -moz-transform: rotate(720deg) scale(0.8);
      }
    }

    @keyframes ball1 {
      0% {
        box-shadow: 30px 0 0 #0000FF; /* 蓝色 */
      }

      50% {
        box-shadow: 0 0 0 #0000FF; /* 蓝色 */
        margin-bottom: 0;
        -webkit-transform: translate(15px, 15px);
        -moz-transform: translate(15px, 15px);
      }

      100% {
        box-shadow: 30px 0 0 #0000FF; /* 蓝色 */
        margin-bottom: 10px;
      }
    }

    @keyframes ball2 {
      0% {
        box-shadow: 30px 0 0 #0000FF; /* 蓝色 */
      }

      50% {
        box-shadow: 0 0 0 #0000FF; /* 蓝色 */
        margin-top: -20px;
        -webkit-transform: translate(15px, 15px);
        -moz-transform: translate(15px, 15px);
      }

      100% {
        box-shadow: 30px 0 0 #0000FF; /* 蓝色 */
        margin-top: 0;
      }
    }
  </style>
</head>

<body class="font-inter">
  <div id="app">
    <div class="preloader">
      <div class="loader"></div>
      <h1>Kylin AIOps</h1>
    </div>
  </div>

  <script type="module" src="/src/main.ts"></script>
  <noscript>This website requires JavaScript to function properly. Please enable JavaScript to continue.</noscript>
  <script defer async src="https://cloud.umami.is/script.js" data-website-id="19a8d926-ef84-44b6-a2a9-7e438716fd9d"></script>
</body>

</html>
